import React, { Component } from "react";
import {
  Text,
  View,
  Image,
  TextInput,
  Alert,
  Platform,
  TouchableOpacity,
  Keyboard,
  StyleSheet
} from "react-native";
import {
  statusBarHeight,
  safeAreaBottomHeight,
  LoginToken,
  screenHeight
} from "../../util/AdapterUtil";
import NavigationService from "../../components/NavigationService";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import actions from "../../models/actions";
import { connect } from "react-redux";
import NavigationBar from "../../components/navigationBar";
import * as requestApi from "../../util/requestApi";
/*{
   "invoiceHead": null,
   "taxRegistNum": "11111111111111111",
   "bankBranch": null,
   "bankBranchNo": null
   }*/
class InvoiceInfoScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      invoiceHead: "",
      taxRegistNum: "",
      bankBranch: "",
      bankBranchNo: ""
    };
  }
  componentWillUnmount() {}
  componentDidMount() {
    this.getInvoice();
  }

  render() {
    const isChildAccount = !!this.props.userInfo.uperUserId;
    return (
      <View style={{ flex: 1, backgroundColor: "#fff" }}>
        <NavigationBar
          navigation={this.props.navigation}
          isBack={true}
          title={"开票信息"}
        />
        <KeyboardAwareScrollView>
          <TouchableOpacity
            onPress={this.hiddenKeyborad.bind(this)}
            activeOpacity={1}
            style={{
              height:
                screenHeight - safeAreaBottomHeight - statusBarHeight - 44 - 10
            }}
          >
            <View style={{ height: 8, backgroundColor: "#F9F9F9" }} />

            <View
              style={{
                marginTop: 8,
                backgroundColor: "#fff",
                flexDirection: "row",
                height: 60,
                paddingLeft: 20,
                paddingRight: 15,
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <Text style={{ color: "#606060", fontSize: 16 }}>开票抬头</Text>

              <TextInput
                style={{
                  padding: 0,
                  textAlign: "right",
                  color: "#202020",
                  fontSize: 16,
                  flex: 1,
                  height: 40,
                  alignItems: "center",
                  justifyContent: "center"
                }}
                placeholder={"请输入开票抬头"}
                maxLength={28}
                editable={!isChildAccount}
                onChangeText={text =>
                  this.setState({
                    invoiceHead: text
                  })
                }
              >
                {this.state.invoiceHead}
              </TextInput>
            </View>

            <View
              style={{
                marginLeft: 20,
                height: 1,
                backgroundColor: "#F9F9F9",
                transform: [{ scaleY: 0.5 }]
              }}
            />

            <View
              style={{
                marginTop: 8,
                backgroundColor: "#fff",
                flexDirection: "row",
                height: 60,
                paddingLeft: 20,
                paddingRight: 15,
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <Text style={{ color: "#606060", fontSize: 16 }}>
                纳税人识别号
              </Text>

              <TextInput
                style={{
                  padding: 0,
                  textAlign: "right",
                  color: "#202020",
                  fontSize: 16,
                  flex: 1,
                  height: 40,
                  alignItems: "center",
                  justifyContent: "center"
                }}
                placeholder={"请输入开票税号"}
                maxLength={28}
                editable={!isChildAccount}
                onChangeText={text =>
                  this.setState({
                    taxRegistNum: text
                  })
                }
              >
                {this.state.taxRegistNum}
              </TextInput>
            </View>
            <View
              style={{
                marginLeft: 20,
                height: 1,
                backgroundColor: "#F9F9F9",
                transform: [{ scaleY: 0.5 }]
              }}
            />

            <View
              style={{
                marginTop: 8,
                backgroundColor: "#fff",
                flexDirection: "row",
                height: 60,
                paddingLeft: 20,
                paddingRight: 15,
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <Text style={{ color: "#606060", fontSize: 16 }}>开户行支行</Text>

              <TextInput
                style={{
                  padding: 0,
                  textAlign: "right",
                  color: "#202020",
                  fontSize: 16,
                  flex: 1,
                  height: 40,
                  alignItems: "center",
                  justifyContent: "center"
                }}
                placeholder={"请输入开户行支行"}
                maxLength={28}
                editable={!isChildAccount}
                onChangeText={text =>
                  this.setState({
                    bankBranch: text
                  })
                }
              >
                {this.state.bankBranch}
              </TextInput>
            </View>
            <View
              style={{
                marginLeft: 20,
                height: 1,
                backgroundColor: "#F9F9F9",
                transform: [{ scaleY: 0.5 }]
              }}
            />

            <View
              style={{
                marginTop: 8,
                backgroundColor: "#fff",
                flexDirection: "row",
                height: 60,
                paddingLeft: 20,
                paddingRight: 15,
                alignItems: "center",
                justifyContent: "center"
              }}
            >
              <Text style={{ color: "#606060", fontSize: 16 }}>行号</Text>

              <TextInput
                style={{
                  padding: 0,
                  textAlign: "right",
                  color: "#202020",
                  fontSize: 16,
                  flex: 1,
                  height: 40,
                  alignItems: "center",
                  justifyContent: "center"
                }}
                placeholder={"请输入开户行行号"}
                maxLength={28}
                editable={!isChildAccount}
                onChangeText={text =>
                  this.setState({
                    bankBranchNo: text
                  })
                }
              >
                {this.state.bankBranchNo}
              </TextInput>
            </View>
            {!isChildAccount && (
              <TouchableOpacity
                style={{
                  marginTop: 30,
                  marginLeft: 20,
                  marginRight: 20,
                  height: 45,
                  borderRadius: 6,
                  backgroundColor: "#3591FF",
                  justifyContent: "center",
                  alignItems: "center"
                }}
                onPress={this.saveInvoice.bind(this)}
              >
                <Text style={{ color: "#fff", fontSize: 14 }}>保存</Text>
              </TouchableOpacity>
            )}
          </TouchableOpacity>
        </KeyboardAwareScrollView>
        <View style={{ height: safeAreaBottomHeight }} />
      </View>
    );
  }

  hiddenKeyborad() {
    Keyboard.dismiss();
  }

  saveInvoice() {
    let { invoiceHead, taxRegistNum, bankBranch, bankBranchNo } = this.state;
    if (
      typeof invoiceHead == "undefined" ||
      invoiceHead == null ||
      invoiceHead == ""
    ) {
      Toast.show("请输入发票抬头", 1000);
      return;
    }
    if (
      typeof taxRegistNum == "undefined" ||
      taxRegistNum == null ||
      taxRegistNum == ""
    ) {
      Toast.show("请输入纳税人识别号", 1000);
      return;
    }
    if (
      typeof bankBranch == "undefined" ||
      bankBranch == null ||
      bankBranch == ""
    ) {
      Toast.show("请输入开户行支行", 1000);
      return;
    }
    if (
      typeof bankBranchNo == "undefined" ||
      bankBranchNo == null ||
      bankBranchNo == ""
    ) {
      Toast.show("请输入行号", 1000);
      return;
    }
    if (
      String(taxRegistNum).length !== 18 ||
      /[^A-Za-z0-9]/g.test(String(taxRegistNum))
    ) {
      Toast.show("请输入18位合法纳税人识别号", 1000);
      return;
    }
    requestApi
      .saveInvoiceInfo(this.state)
      .then(res => {
        Toast.show("保存成功", 1000);
      })
      .catch(err => {
        Toast.show(err.msg, 1000);
      });
  }

  //获取开票信息
  getInvoice = () => {
    requestApi
      .getInvoiceInfo()
      .then(res => {
        this.setState({
          invoiceHead: res.invoiceHead,
          taxRegistNum: res.taxRegistNum,
          bankBranch: res.bankBranch,
          bankBranchNo: res.bankBranchNo
        });
      })
      .catch(err => {
        Toast.show(err.msg, 1000);
      });
  };
}

const styles = StyleSheet.create({
  loginTitle: {
    marginLeft: 15,
    marginTop: 25,
    color: "#202020",
    fontSize: 30,
    fontWeight: "bold"
  }
});

export default connect(
  ({ userInfo }) => ({
    userInfo
  }),
  {
    getLoginToken: actions.getLoginToken
  }
)(InvoiceInfoScreen);
